import React, { FC, useRef } from 'react';
import { BankOutView, BankSearchBtnList } from '../components';
import './index.css';
import { Form, Input, Button, Select, DatePicker } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

interface transactionProps {
  dataType: "0" | "1";
  startDate: string | Date[];
  endDate: string;
  business: string;
  dealName: string;
  dealType: string;
};

const searchBtnListData: { label: string; value: string }[] = [
  { label: "吃饭", value: "1" },
  { label: "吃饭中", value: "2" },
  { label: "吃饭完毕", value: "3" },
  { label: "炒菜", value: "4" },
  { label: "炒菜中", value: "5" },
  { label: "炒菜完毕", value: "6" },
  { label: "刷碗", value: "7" },
  { label: "刷碗中", value: "8" },
  { label: "刷碗完毕", value: "9" },
]

const { RangePicker } = DatePicker;
const TransactionInformationInquiry: FC = () => {
  const [form] = Form.useForm();
  const btnBtnList = useRef();

  const setCurrencyNumber = (e: any) => { }

  const handleSearchBtn = () => {
    form.validateFields().then(values => {
      const btnList = (btnBtnList.current as any).selectBtn;
      const start_date = dayjs(values.startDate[0]).format("YYYYMMDD");
      const end_data = dayjs(values.startDate[1]).format("YYYYMMDD");
      const obj = { ...values, startDate: start_date, endDate: end_data, dealType: btnList };
      alert(JSON.stringify(obj));
    }).catch(err => {
      console.log(err);
    })
  }

  const handleResetBtn = () => {
    form.resetFields();
  }

  return (
    <BankOutView title="交易信息查询">
      <Form form={form} className='search-view1' initialValues={{
        dataType: '1',
        startDate: [dayjs("20230101") as unknown as Date, dayjs("20231201") as unknown as Date],
      }}>
        <div className='search-item1'>
          <div className="search-item-left">
            <Form.Item<transactionProps>
              name="dataType"
              label=""
            >
              <Select
                style={{ width: 114 }}
                onChange={(e) => setCurrencyNumber(e)}
                options={[
                  { value: "1", label: "录入" },
                  { value: "0", label: "复核" },
                ]}
              />
            </Form.Item>
          </div>
          <div className="search-item-center">
            <Form.Item<transactionProps>
              name="startDate"
              rules={[{ required: true, message: '请选择起止时间!' }]}
            >
              <RangePicker className='search-view-left' locale={locale} />
            </Form.Item>
          </div>
          <div>
            <Form.Item<transactionProps>
              name="business"
              label="业务类型"
              rules={[{ required: true, message: '请选择业务类型!' }]}
            >
              <Input style={{ width: 250 }} placeholder='请选择业务类型!' />
            </Form.Item>
          </div>
        </div>
        <div>
          <Form.Item<transactionProps>
            name="dealName"
            label="交易名称"
            labelCol={{ span: 2 }}
            wrapperCol={{ span: 16 }}
            rules={[{ required: true, message: '请输入交易名称!' }]}
          >
            <Input style={{ width: 250 }} placeholder='请输入交易名称!' />
          </Form.Item>
        </div>
        <div>
          <BankSearchBtnList ref={btnBtnList} list={searchBtnListData} />
        </div>
        <div className='btn-s-box'>
          <Button type='primary' className='base-btn' onClick={() => handleSearchBtn()}>查询</Button>
          <Button type='default' className='base-btn' onClick={() => handleResetBtn()}>重置</Button>
        </div>
      </Form>
    </BankOutView>
  )
}
export default TransactionInformationInquiry;